Tutorial: Creating a toggle button

In this tutorial you learn how to create a toggle button in Kanzi Studio using the Kanzi state manager.

This tutorial assumes you understand the basics of working with Kanzi Studio. The best entry points for getting familiar with Kanzi Studio are:

• Tutorial: Create a simple IVI
• Quick start guide

Complete the tutorial by watching the video, or by following the written instructions.

Assets for the tutorial

The starting point of this tutorial is the Toggle button.kzproj Kanzi Studio project file stored in the <KanziWorkspace>/Tutorials/Toggle button/Assets directory.

The <KanziWorkspace>/Tutorials/Toggle button/Completed directory contains the completed project of this tutorial.

Create a Toggle Button 2D node

In this section you create and position a Toggle Button 2D node.

To create a Toggle Button 2D node:

1. In Kanzi Studio open the project stored in the <KanziWorkspace>/Tutorials/Toggle button/Assets directory.
2. Create and position the Toggle Button 2D node:
   1. In the Project press Alt and right-click the node where you want to create the toggle button and select Toggle Button 2D.
      For example, create a Toggle Button 2D node in the Frame node.
      
   2. From the Assets window drag the ToggleButtonBackground image to the Toggle Button 2D node in the Project.
      
   3. In the Project select the Toggle Button 2D node, in the Preview click Edit in the top right corner to enter the Edit mode, and in the Node tool click the center square to align the Toggle Button 2D node to the center of the Frame node.
   

Create the toggle button states

In this section you use the state manager to define what the toggle button looks like when it is switched on and off.

To create the toggle button states:

1. In the Project select the Toggle Button 2D node and in the State Tools click .
   You can find the State Tools window below the Preview window.
   Kanzi Studio creates a new state manager and assigns it to the Toggle Button 2D node.
   
2. In the State Tools click twice to create two states, double-click the name of each state, and name one On and the other Off.
   The On state defines the state of your application when the toggle button is switched on, the Off state when the toggle button is switched off.
   
3. Add and position the toggle button indicator:
   1. From the Assets window drag the Indicator image to the Toggle Button 2D node in the Project.
      
   2. In the Preview in the Node tool click and select Render Transformation for the target transformation.
      You can apply transformations in these ways:
      • Layout transformation transforms the item before it applies the layout pass.
      • Render transformation transforms the item after it applies the layout pass, but before it renders the item.

      Always use the Render Transformation, unless you know that you have to recalculate the layout.
      

   3. Use the Node tool to place the Indicator node over the Off part of the ToggleButtonBackground node.
      Tip You can adjust the Preview zoom level in the upper right corner of the Preview.
      
4. In the State Tools click above the On state to save the current position of the toggle button indicator to that state.
   
5. In the Preview use the Node tool to position the toggle button indicator over the On part of the ToggleButtonBackground node.
   Tip Hold down the Shift key when you drag a node with the Node tool to move the node in a true horizontal or vertical line.
   
6. In the Project select the Indicator node and in the Properties set the Image property to the IndicatorOff image.
   Here you set what the toggle button indicator looks like when the toggle button is in the Off state.
   
7. In the Preview click Edit to exit the Edit mode.
8. In the State Tools click above the Off state to save the current position of the toggle button indicator to that state.
   
9. In the State Tools click <No Controller Property> and select Button > Toggle State.
   In a state manager the value of the property you select as the Controller Property defines the conditions when each state in a state group is active.
   
10. In the State Tools set the value of the controller property for each state. For the On state set the value to 1, and for the Off state leave the value set to 0.
    
11. In the State Tools click Active to deactivate the State Tools.
    
12. When you click the toggle button in the Preview you toggle between the On and Off states you defined in the state manager that you created in the Toggle Button 2D node.
    

What's next?

In this tutorial you learned how to create a toggle button. Now you can:

• Learn how to create a button that changes its appearance based on user actions. See Tutorial: Creating a button.
• Learn more about different types of button nodes and how to use them. See Buttons.
• Learn how to create a slider. See Tutorial: Creating a slider.
• Complete other tutorials. See Tutorials.

See also

To find out more about the Kanzi state manager, see State managers.

To learn more about different types of button nodes and how to use them, see Buttons.

To learn more about creating Kanzi applications, see Tutorials.

Open topic with navigation